<template>
  <div>
     
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品属性</el-breadcrumb-item>
      </el-breadcrumb>
       <br>
  <div class="bk">
  <div class="fl">
      <span>选择商品分类:</span>  
      <el-cascader :options="omoList" :props="props1"  :show-all-levels="false"  v-model="pid"  clearable class="gk" @change="getvalue"/>
      <el-button type="primary" :disabled="zt" @click="dialogTableVisible = true" class="gk">添加参数</el-button> 
                <!-- 信息-->
   </div><br>
   <el-table :data="list" style="width: 100%">
    <el-table-column type="expand">
    <template #default="scope"> 
  <el-tag class="mx-1" v-for="(item,i) in scope.row.attrVals" :key="i"
    closable :disable-transitions="false" 
    @close="handleClose(scope.row,i)">
    {{ item }}
  </el-tag>
      <el-input class="ml-1 w-20"  size="small"
          v-if="scope.row.inputVisible" 
          v-model="inputValue" 
          @keyup.enter="handleInputConfirm(scope.row)"
          >
      </el-input>
    <el-button v-else class="button-new-tag" size="small" @click.stop="showInput(scope.row)">+ New Tag</el-button>
    </template> 
    </el-table-column>
   <el-table-column type="index" width="50" />
    <el-table-column label="参数名称" prop="attrName" />
    <el-table-column label="操作" >
           <template #default="scope">
            <el-button type="primary" :icon="Edit" @click.prevent="updeagoods(scope.row.id,scope.row.attrName)"></el-button>
              <el-button type="danger" :icon="Delete" @click.prevent="deleteRow(scope.row.id)"></el-button>
         </template>
          </el-table-column>
  </el-table>
                <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length">
    </el-pagination>
  <!-- 添加属性 -->
    <el-dialog
        class="dia1"
           v-model="dialogTableVisible"
            width="45%"
            :before-close="handleClose"
            >
             <div class="yh">
              <label>分类名:</label> 
              <el-input placeholder="属性名" v-model="name"></el-input>
            </div>
             <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="addatrr">添加</el-button>
              <el-button class="bj" type="warning" @click="dialogTableVisible = false">取消</el-button>
            </span>
    </el-dialog>
      <!-- 修改 -->
    <el-dialog
        class="dia1"
           v-model="dialogTable"
            width="45%"
            :before-close="handleClose"
            >
             <div class="yh">
              <label>分类名:</label> 
              <el-input placeholder="分类名" v-model="name"></el-input>
            </div>
             <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="updea">编辑</el-button>
              <el-button class="bj" type="warning" @click="dialogTable = false">取消</el-button>
            </span>
    </el-dialog>
    
  </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive,computed,toRefs,onMounted,nextTick } from "vue";
import { useRouter } from 'vue-router';
import httpRequest from '../service';
import { ElMessage,ElMessageBox } from 'element-plus';
import type { ElInput } from 'element-plus'
import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,
  ArrowDown
} from '@element-plus/icons-vue'
const props1 = {
  checkStrictly: true,
}
interface DataProps{
      cateName:string,
      pageNo:number,
      pageSize:number,
      select:()=>void,
      omoList:[],
      updeagoods:(id:any,cateName:string)=>void,
      id:number,
      dialogTableVisible:boolean,
      name:string,
      updea:()=>void,
      deleteRow:(id:any)=>void,
      dialogTable:boolean,
      add:()=>void,
      addsj:string,
      getlev:()=>void,
      pid:number,
      list:[],
      zt:boolean,
      cx:string,
      onChange:(va:any)=>void,
      showInput:(row:any)=>void,
      inputVisible:boolean,
      handleInputConfirm:(row:any)=>void,
      inputValue:string,
      addatrr:()=>void,
      getvalue:(val:any)=>void,
      catId:number,
      handleClose:(row:any,aa:any)=>void

}
export default {
  name:'goods',
  setup(){
    const data:DataProps=reactive({
      cateName:"",
      pageNo:1,
      pageSize:35,
      omoList:[],
      id:0,
      dialogTableVisible:false,
      dialogTable:false,
      name:"",
      addsj:"",
      pid:0,
      list:[],
      zt:true,
      cx:'',
      inputValue:'',
      inputVisible:false,
      catId:0,
      //获取改变的值
      getvalue:(val:any)=>{
        if(val===null){
          data.list=[]
          data.zt=true
        }else{
           data.catId=val[val.length-1]
            data.getlev()
          data.zt=false

        }
           
        if(data.catId===null||data.catId===0){
          data.list=[]
        }
              
      },
      //显示文本框
      showInput:(row:any)=>{
       console.log(row);
        
        row.inputVisible=true 
 
      },
       handleClose:(row:any,aa:any)=>{
       row.attrVals.splice(row.attrVals.indexOf(aa), 1);
           httpRequest
    .request({
      url: '/attribute/updattribute',
      method: 'post',
      data:{
       attrVals: row.attrVals.join("_"),
       id: row.id
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
       if(res.code===200){
      ElMessage({
      message: '删除属性成功',
      type: 'success',
        })
      // data.dialogTable=false 
      data.getlev()
      }else{
        ElMessage.error('删除失败')
      }
      } )
       },

      //添加属性参数
      handleInputConfirm:(row:any)=>{
         row.inputVisible = false
         row.attrVals.push(data.inputValue)
        httpRequest
    .request({
      url: '/attribute/updattribute',
      method: 'post',
      data:{
       attrVals: row.attrVals.join("_"),
       id: row.id
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
       if(res.code===200){
      ElMessage({
      message: '添加成功',
      type: 'success',
        })
      // data.dialogTable=false 
      data.getlev()
      }else{
        ElMessage.error('添加失败')
      }
      
       
      
    })
        
        data.inputValue= ''
      },
      //添加属性
      addatrr:()=>{
         httpRequest
          .request({
      url: '/attribute/addattribute',
      method: 'post',
      data:{
       attrName: data.name,
       catId: data.catId,
       attrSel:2,
       attrWrite:2
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
       if(res.code===200){
      ElMessage({
      message: '添加成功',
      type: 'success',
        })
      data.dialogTableVisible=false 
      data.getlev()
      data.name=''
      }else{
        ElMessage.error('添加失败')
      }
    })

       },
      onChange:(va:any)=>{
            console.log(va);
            data.cx=va[0]
            
      },
      select:()=>{
  httpRequest
  .request({
    url: '/goodscategory/gethaschildren',
    method: 'post',
    data:{
      cateName:data.cateName,
      pageNo:data.pageNo,
      pageSize:data.pageSize
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {
    // data.count=res.data.count
    
    let {rows}=res.data
    data.omoList=rows   
    // console.log(rows);
    // return
    for(let i=0;i<rows.length;i++){
         rows[i].label=rows[i].cateName
        rows[i].value=rows[i].id
         for(let j=0;j<rows[i].children.length;j++){
              rows[i].children[j].label=rows[i].children[j].cateName
             rows[i].children[j].value=rows[i].children[j].id    
               for(let z=0;z<rows[i].children[j].children.length;z++){
                     rows[i].children[j].children[z].label=rows[i].children[j].children[z].cateName
                     rows[i].children[j].children[z].value=rows[i].children[j].children[z].id    
               }
         }
      console.log(rows[i]);
       }
      
  
  })
    },
    //修改获取idrow
     updeagoods:(id:any,cateName:string)=>{
      data.dialogTable=true
      data.id=id 
      data.name=cateName
      console.log(id,cateName)
      
     },
     //修改
     updea:()=>{
              httpRequest
    .request({
      url: '/attribute/updattribute',
      method: 'post',
      data:{
        id:data.id,
        attrName:data.name
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
          ElMessage({
      message: '修改成功',
      type: 'success',
        })
      data.dialogTable=false 
      data.getlev()
      data.name=''
      }else{
        ElMessage.error('修改失败')
      }
      
    })
        
     },
     //删除
     deleteRow:(id:any)=>{
        ElMessageBox.confirm(
    '确定需要删除吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
            httpRequest
    .request({
      url: '/attribute/delattribute',
      method: 'post',
      data:{
      id
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      if(res.code===200){
          ElMessage({
      message: '删除成功',
      type: 'success',
        })
      data.getlev()
      }else{
        ElMessage.error('删除失败')
      }
      console.log(res);
      
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
     },
    //添加
    add:()=>{
           httpRequest
    .request({
      url: '/goodscategory/addgoodscategory',
      method: 'post',
      data:{
        cateName:data.addsj,
        catePid:data.pid
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
      ElMessage({
      message: '添加成功',
      type: 'success',
        })
        data.addsj=""
      data.dialogTable=false 
      data.select()
      }else{
        ElMessage.error('添加失败')
      }
    })
    },
    getlev:()=>{
               httpRequest
    .request({
      url: '/attribute/findbycateidandsel',
      method: 'post',
      data:{
       catId: data.catId,
       attrSel: 2
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      
       data.list=res.data
      // let {data}=res
       res.data.forEach((element:any) => {
          element.attrVals = element.attrVals?element.attrVals.split("_"):[]
          element.inputVisible=data.inputVisible
       })
      console.log(res.data);
       
      
    })
    }

    })
onMounted(()=> {
  data.select()
  // data.getlev()
})
     const refData=toRefs(data)
  return{
    ...refData,
     Search,
    Edit,
    Check,
    Message,
    Star,
    Delete
  }

  }

}
</script>

<style lang="less" scoped>
.bk{
  border: 1px solid #cfd1d4;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}
.gk{
  margin-left: 20px;
}
span{
  margin-top: 10px;
}
.fl{
  display: flex;
  // margin-left: -900px;
}
hr{
  margin-left: 40px;
}

</style>